<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品中心</title>
    <link rel="stylesheet" href="./style/global.css">
    <link rel="stylesheet" href="./style/product.css">
    
</head>
<body>
    <!-- 头部有logo和中英文切换 -->
    <header>
        <img src="./image/index/LOGO.png" alt="首页logo，联力机械" class="top_logo_img">
        <div class="lang_btn">
            <button class="lang_cn active">中文</button>
            <button class="lang_eng">English</button>
        </div>
    </header>
    <!-- 中间tab标签区域 可能有跳转事件  里面使用a标签 -->
    <div class="tab_choose">
        <a href="./index.html"> 网站首页</a>
        <a href="./about.html"> 关于联力</a>
        <a href="./news.html"> 公司动态</a>
        <a href="./about.html#rongyuzizhi"> 荣誉资质</a>
        <a href="./product.html" class="active"> 产品中心</a>
        <a href="./case.html"> 案例中心</a>
    </div>
    <!-- banner背景图片 -->
    <div class="big_banner_box">
        <img src="./image/product/banner3.png" alt="产品中心" class="top_banner">
        <!-- 下方是可能有绝对定位的一个tab切换 -->
        <div class="tab_trance">
            <div class="inner_box">
                <img src="./image//pic/product/web1x/zhuangxie1.png" alt="">
                <span>装卸设备</span>
            </div>
            <div class="inner_box">
                <img src="./image//pic/product/web1x/shengjiang1.png" alt="">
                <span>升降设备</span>
            </div>
            <div class="inner_box">
                <img src="./image//pic/product/web1x/gaokong1.png" alt="">
                <span>高空设备</span>
            </div>
            <div class="inner_box">
                <img src="./image//pic/product/web1x/qita1.png" alt="">
                <span>其他配件</span>
            </div>
        </div>
    </div>
    <!-- 产品中心 -->
    <div class='pic_info'>
        <img src="./image/pic//about//web1x//picshow.png" alt="">
        <div class="info_text">
            <span>产品中心</span> 
            <span>PRODUCT CENTER</span>
        </div>
    </div>
    <!-- 下面联动切换 -->
    <div class="product_tabcheck">
        <span class='red_line'>————</span>
        <span class="product_text active"> &nbsp&nbsp固定式登车桥 &nbsp&nbsp</span>
        <span class='red_line'>————</span>
        <span class="product_text"> &nbsp&nbsp移动式登车桥 &nbsp&nbsp</span>
        <span class='red_line'>————</span>
        <span class="product_text"> &nbsp&nbsp自动液压卸车机 &nbsp&nbsp</span>
        <span class='red_line'>————</span>
    </div>
    <!-- 下方的内容区域 -->
    <div class="product_box">
        <div class="product_box_msg">
            <img src="./image/product/1.png" alt="">
            <span class="product_title">移动式登车桥DCQY10-7</span>
            <span class="product_info_msg">可调节长度的索链能方便地钩住货车，使移动式登车桥与货车始终紧密贴合。28T联动调节支腿方便灵活，有效保障平台工作时无安全后顾之忧，移动时采用手摇液压泵作动力，勿需外接动力电源即可轻松实现登车桥的高度调节。配置的刹车垫可有效防止货车装卸时登车桥移位。</span>
        </div>
        <div class="product_box_msg">
            <img src="./image/product/2.png" alt="">
            <span class="product_title">移动式登车桥DCQY10-7</span>
            <span class="product_info_msg">可调节长度的索链能方便地钩住货车，使移动式登车桥与货车始终紧密贴合。28T联动调节支腿方便灵活，有效保障平台工作时无安全后顾之忧，移动时采用手摇液压泵作动力，勿需外接动力电源即可轻松实现登车桥的高度调节。配置的刹车垫可有效防止货车装卸时登车桥移位。</span>
        </div>
        <div class="product_box_msg">
            <img src="./image/product/3.png" alt="">
            <span class="product_title">移动式登车桥DCQY10-7</span>
            <span class="product_info_msg">可调节长度的索链能方便地钩住货车，使移动式登车桥与货车始终紧密贴合。28T联动调节支腿方便灵活，有效保障平台工作时无安全后顾之忧，移动时采用手摇液压泵作动力，勿需外接动力电源即可轻松实现登车桥的高度调节。配置的刹车垫可有效防止货车装卸时登车桥移位。</span>
        </div>
        <div class="product_box_msg">
            <img src="./image/product/4.png" alt="">
            <span class="product_title">移动式登车桥DCQY10-7</span>
            <span class="product_info_msg">可调节长度的索链能方便地钩住货车，使移动式登车桥与货车始终紧密贴合。28T联动调节支腿方便灵活，有效保障平台工作时无安全后顾之忧，移动时采用手摇液压泵作动力，勿需外接动力电源即可轻松实现登车桥的高度调节。配置的刹车垫可有效防止货车装卸时登车桥移位。</span>
        </div>
        <div class="product_box_msg">
            <img src="./image/product/5.png" alt="">
            <span class="product_title">移动式登车桥DCQY10-7</span>
            <span class="product_info_msg">可调节长度的索链能方便地钩住货车，使移动式登车桥与货车始终紧密贴合。28T联动调节支腿方便灵活，有效保障平台工作时无安全后顾之忧，移动时采用手摇液压泵作动力，勿需外接动力电源即可轻松实现登车桥的高度调节。配置的刹车垫可有效防止货车装卸时登车桥移位。</span>
        </div>
        <div class="product_box_msg">
            <img src="./image/product/6.png" alt="">
            <span class="product_title">移动式登车桥DCQY10-7</span>
            <span class="product_info_msg">可调节长度的索链能方便地钩住货车，使移动式登车桥与货车始终紧密贴合。28T联动调节支腿方便灵活，有效保障平台工作时无安全后顾之忧，移动时采用手摇液压泵作动力，勿需外接动力电源即可轻松实现登车桥的高度调节。配置的刹车垫可有效防止货车装卸时登车桥移位。</span>
        </div>
    </div>
        <!-- 新闻内容切换想要切换可以用插件 -->
        <div class="tab_check">
            <div>首页</div>
            <div class="trans_tab active">1</div>
            <div class="trans_tab">2</div>
            <div class="trans_tab">3</div>
            <div class="trans_tab">4</div>
            <div class="dot">...</div>
            <div class="trans_tab">10</div>
            <div>下一页</div>
            <div>尾页</div>
        </div>
        <div class="list_msg">
                <div class="left">
                    <ul>
                    <li class="topmsg">关于我们</li>
                    <li><a href="./about.html#rongyuzizhi">荣誉资质</a></li>
                    <li><a href="./about.html#qiyewenhua">企业文化</a></li>
                    <li><a href="./about.html#qiyejianjie">公司简介</a></li>
                </ul>
                <ul>
                    <li class="topmsg">新闻动态</li>
                    <li><a href="./news.html">公司动态</a></li>
                    <li><a href="./news.html">行业新闻</a></li>
                </ul>
                <ul>
                    <li class="topmsg">产品中心</li>
                    <li><a href="./product.html">装卸设备</a></li>
                    <li><a href="./product.html">升降设备</a></li>
                    <li><a href="./product.html">高空作业平台</a></li>
                    <li><a href="./product.html">其他配件</a></li>
                </ul>
                <ul>
                    <li class="topmsg">成功案例</li>
                    <li><a href="./case.html">成功案例</a></li>
                    <li><a href="./case.html">视频中心</a></li>
                </ul>
                <ul>
                    <li class="topmsg">联系我们</li>
                    <li>在线咨询</li>
                </ul>
                </div>
                <div class="right">
                    <span>咨询热线：136-8801-5068向经理（重庆市场部）</span>
                    <span>187-9315-8884夏先生（西北市场部）</span>
                    <span>销售热线：136-8801-5068</span>
                    <span>地　　址：广汉市经济开发区高雄路西三段22号</span>
                </div>
        </div>
        <!-- 最底部的信息 -->
        <div class="botton_info">
            <div class="left">
                    网站首页  |  关于联力  |  公司动态  | 荣誉资质  |  产品中心  |  案例中心 
            </div>
            <div class="right">技术支持：成都诗昱晞科技有限公司</div>
    </div>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/product.js"></script>
</body>
</html>